<template>
    <div>

    </div>
</template>

<script>
// target: 几何体顶点位置数据和点模型points
import * as THREE from "three";
let scene=new THREE.Scene();
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// 之前的圆形 长方体 球体等都是基于这个类构建的。
// 创建一个缓冲实例，用于保存顶点位置数据 BufferGeometry是一个无任何形状的空几何体，由它定义任何几何体形状
// 一 创建一个空的几何体对象
const geometry = new THREE.BufferGeometry();
//1. 创建顶点位置数据
const vertices = new Float32Array([
    0, 0, 0,
    50, 0, 0,
    0, 100, 0,
    0, 0, 10,
    0, 0, 100,
    50, 0, 10,
]);
//2.定义定点数据 创建一个属性缓冲区对象，来表示几何体的顶点位置数据 参数1：顶点位置数据 2：每个顶点数据项的分量数量
const attribute = new THREE.BufferAttribute(vertices, 3);
console.log("attribute", attribute);
// 3.设置几何体的顶点位置属性或者geometry.setAttribute('position', attribute);
 geometry.attributes.position = attribute;
// 之前
// // 基础网格材质
// let material = new THREE.MeshBasicMaterial({
//     color: 0xff0000,
//     side: THREE.DoubleSide
// }); 
// //创建一个网格模型物体
// let mesh = new THREE.Mesh(geometry, material);
// mesh.position.set(0, 0, 0);
// scene.add(mesh);

// 之前和现在之间的对比

// 现在
// // 创建一个点材质
// const material = new THREE.PointsMaterial( { color: 0xffff00,size:20 } );
// // 创建一个点模型物体
// const Points = new THREE.Points(geometry,material);
// scene.add( Points );

// 创建一个基本线材质
const material = new THREE.LineBasicMaterial( {
	color: 0xffff00,
	// linewidth: 1,
	// linecap: 'round', //ignored by WebGLRenderer
	// linejoin:  'round' //ignored by WebGLRenderer
} );
// 创建一个线模型物体 Line是开放
// const line = new THREE.Line( geometry, material );
// 创建一个线模型物体 LineLoop是闭合
// const line = new THREE.LineLoop( geometry, material );
// 创建一个线模型物体 LineSegments 非连续线条
const line = new THREE.LineSegments( geometry, material );
scene.add( line );


let camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(200, 300, 200);
camera.lookAt(scene.position);

// let axesHelper = new THREE.AxesHelper(100);
// axesHelper.setColors(0xff0000, 0x00ff00, 0x0000ff);
// scene.add(axesHelper);

let renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls( camera, renderer.domElement );
renderer.render(scene, camera);
controls.addEventListener('change', function () {
    renderer.render(scene, camera);
});
export default {
}
</script>

<style scoped>

</style>